<template>
    <div >
        <van-sticky :offset-top="0">
            <homeHeader :nav_list="nav_list" ></homeHeader>
        </van-sticky>
        <transition
            :enter-active-class="`animate__animated animate__${dir_enter}`"
            :leave-active-class="`animate__animated animate__${dir_leave}`"
        >
        <div class="wrapper" >

            <component :is="who" :swipeList="swipeList" :typeChange="type"></component>
        </div>
        </transition>
        <Footer></Footer>
    </div>
    

</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import BScroll from 'better-scroll'

import HomeList from '../components/homelist'
import homeShopList from "../components/homeShopList.vue"
import homeHeader from '../components/homeHeader'
import shopdetails from './shopdetails'
import homeRefresh from '../components/homeRefresh'
import homedetails from './shopdetails'
import Footer from '../components/footer'


    export default {
        
        data(){
            return{
                isLoading: false,
                pageIndex:1,
                shopList:[],
                nav_list:[],
                list: [],
                loading: false,
                finished: false,
                isShow:false,
                // who:'homedetails',
                who:'homeRefresh',
                type:'',
                dir_enter: '',
                dir_leave: '',
                swipeList:''
            }
        },
        methods: {
            // onScroll(pos){
            //     console.log(pos.y)
            // },
            onRefresh() {
                axios.post("shopList",
                    {
                        pageId:'moses:pid_25',
                        pageIndex:1,
                        pageName:"homePage",
                        platform:"mweb",
                        isTab:1,
                    }
                ).then((result)=>{
                    this.shopList = result.data.data.blockList[1].block
                    this.isLoading = false;
                })
            },
            onLoad(){
                 axios.post("shopList",
                    {
                        pageId:'moses:pid_25',
                        pageIndex:1,
                        pageName:"homePage",
                        platform:"mweb",
                        isTab:1,
                    }
                ).then((result)=>{
                    this.loading = false;
                    this.shopList = [...this.shopList , ...result.data.data.blockList[1].block]
                })
            }
        },
        async mounted() {
            await axios({
                url:"/navList1",
                }).then((result)=>{
                    let data = result.data.data.catagoryList
                    this.nav_list = [{name:'热门',catagoryId:'hot'},...data]
                    this.type = this.$route.params.type
                })
            await axios.post("shopList",
                {
                    pageId:'moses:pid_25',
                    pageIndex:1,
                    pageName:"homePage",
                    platform:"mweb",
                    isTab:1,
                }
            ).then((result)=>{
                
                this.shopList = result.data.data.blockList[1].block
                // console.log(result)
            })
        },
        watch: {
            $route(to ,from){
                // console.log(to.params.id)
                this.type = to.params.id
                if(to.params.id){
                    this.who = 'homedetails'
                }else{
                    this.who = 'homeRefresh'
                }
                if(typeof to.params.id === 'string'){
                    this.dir_enter = 'slideInRight'
                    this.dir_leave = 'slideOutLeft'
                    // console.log(to.params.id)
                }else{
                    
                    this.dir_enter = 'slideInLeft'
                    this.dir_leave = 'slideOutRight'
                    // console.log('no')
                }
                
            }
        },
        components:{
            homeShopList,
            HomeList,
            homeHeader,
            shopdetails,
            homeRefresh,
            homedetails,
            Footer
        }
        
    }
        
</script>

<style lang="stylus" scoped>

</style>